<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏路线 - 厦门旅游</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="favorite-routes.css">
</head>
<body>
    <div class="cyber-background">
        <div class="grid-overlay"></div>
        <div class="floating-particles"></div>
        <div class="data-streams"></div>
    </div>

    <header>
        <nav class="navbar cyber-nav">
            <div class="nav-brand">
                <span class="brand-icon">⭐</span>
                <span class="brand-text">鹭行记</span>
                <span class="brand-subtitle">FAVORITE ROUTES</span>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html">🏠 首页</a></li>
                <li><a href="explore.html">🔍 探索</a></li>
                <li><a href="route-planner.html">🗺️ 路线规划</a></li>
                <li><a href="ai-assistant.html">🤖 AI助手</a></li>
                <li><a href="user-center.html">👤 个人中心</a></li>
            </ul>
        </nav>
    </header>

    <main class="routes-main">
        <div class="container">
            <!-- 页面标题 -->
            <section class="page-header">
                <div class="header-content">
                    <h1 class="page-title">
                        <span class="title-icon">⭐</span>
                        我的收藏路线
                        <span class="title-glow"></span>
                    </h1>
                    <p class="page-subtitle">您精心收藏的厦门旅游路线</p>
                    <div class="stats-bar">
                        <div class="stat-item">
                            <span class="stat-number" id="totalRoutes">5</span>
                            <span class="stat-label">收藏路线</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="totalDays">12</span>
                            <span class="stat-label">总游览天数</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="totalSpots">28</span>
                            <span class="stat-label">涵盖景点</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 筛选和排序 -->
            <section class="filter-section">
                <div class="filter-controls">
                    <div class="filter-group">
                        <label class="filter-label">🏷️ 路线类型</label>
                        <select class="filter-select" id="typeFilter">
                            <option value="all">全部类型</option>
                            <option value="cultural">文化历史</option>
                            <option value="natural">自然风光</option>
                            <option value="food">美食体验</option>
                            <option value="leisure">休闲娱乐</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">⏰ 游览时长</label>
                        <select class="filter-select" id="durationFilter">
                            <option value="all">全部时长</option>
                            <option value="half-day">半天</option>
                            <option value="one-day">一天</option>
                            <option value="multi-day">多天</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">📊 排序方式</label>
                        <select class="filter-select" id="sortFilter">
                            <option value="newest">最新收藏</option>
                            <option value="oldest">最早收藏</option>
                            <option value="duration">按时长</option>
                            <option value="rating">按评分</option>
                        </select>
                    </div>
                </div>
            </section>

            <!-- 路线列表 -->
            <section class="routes-section">
                <div class="routes-grid" id="routesGrid">
                    <!-- 路线卡片将通过JavaScript动态生成 -->
                </div>
            </section>
        </div>
    </main>

    <!-- 路线详情弹窗 -->
    <div id="routeModal" class="modal">
        <div class="modal-content route-modal">
            <div class="modal-header">
                <h3 id="modalTitle">路线详情</h3>
                <button class="close-btn" onclick="closeRouteModal()">&times;</button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 详情内容将动态加载 -->
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeRouteModal()">关闭</button>
                <button class="btn-primary" onclick="startRoute()">开始旅程</button>
                <button class="btn-danger" onclick="removeFromFavorites()">取消收藏</button>
            </div>
        </div>
    </div>

    <script src="favorite-routes.js"></script>
</body>
</html>
